<template>
    <div class="navbar">
        <el-col :span="4">
            <el-menu :default-active="activeIndex"
                     class="el-menu-vertical-demo"
                     router>
                <el-menu-item index="/home">首页</el-menu-item>
                <el-menu-item index="/about">关于我们</el-menu-item>
                <el-submenu index="process">
                    <template slot="title">服务流程</template>
                    <el-menu-item-group>
                        <el-menu-item index="/process/1/">海外医疗咨询与服务</el-menu-item>
                        <el-menu-item index="/process/2/">海外专家远程会诊服务</el-menu-item>
                        <el-menu-item index="/process/3/">其他服务</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-menu-item index="/hospitals">权威医院</el-menu-item>
                <el-menu-item index="/honours">荣誉资质</el-menu-item>
                <el-submenu index="news">
                    <template slot="title">新闻动态</template>
                    <el-menu-item-group>
                        <el-menu-item index="/news/1/">公司新闻</el-menu-item>
                        <el-menu-item index="/news/2/">医学前沿</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-menu-item index="/contact">联系我们</el-menu-item>
            </el-menu>
        </el-col>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeIndex: '/about',
        }
    },
    watch: {
        "$route"(to, from) {
            this.activeIndex = to.path;
        }
    },
    created() {

    }
}
</script>

<style lang="less">
.navbar {
    overflow: hidden;
    width: 16.66667%;
    .el-col-4{
        width: 100%;
    }
}
</style>